<template>
    <div id="PageLink">
        <a @click="projectLink(PageLink)" class="pageLink pageLink_a" v-if="labelType === 'a'">{{ labelContent }}</a>

        <button @click="projectLink(PageLink)" class="pageLink pageLink_button" v-if="labelType === 'button'">{{ labelContent }}</button>

        <p @click="projectLink(PageLink)" class="pageLink pageLink_p" v-if="labelType === 'p'">{{ labelContent }}</p>

        <b @click="projectLink(PageLink)" class="pageLink pageLink_b" v-if="labelType === 'b'">{{ labelContent }}</b>

        <i @click="projectLink(PageLink)" class="fa pageLink pageLink_fontImg" v-bind:class="'fa-' + fontImg" v-if="labelType === 'fontImg'"></i>

        <img @click="projectLink(PageLink)" class="pageLink pageLink_img" v-bind:src="imgLink" v-bind:alt="PageLink" v-if="labelType === 'img'">
    </div>
</template>

<script>
    export default {
        name: "PageLink",
        props: {
            labelType: {
                type: String,
                default: 'a'
            },
            PageLink: {
                type: String
            },
            labelContent: {
                type: String,
                default: '跳转页面'
            },
            fontImg: {
                type: String
            },
            imgLink: {
                type: String
            }
        },
        methods: {
            projectLink(url) {
                window.location.href = url
            }
        },
    }
</script>

<style scoped>
    #PageLink{
        display: inline-block;
    }

    .pageLink{
        cursor: pointer;
        transition: 0.4s;
    }
    .pageLink:hover{
        color: #0083ff;
    }

    .pageLink_a{

    }

    .pageLink_button{

    }

    .pageLink_p{

    }

    .pageLink_b{

    }

    .pageLink_img{

    }

    .pageLink_fontImg{

    }
</style>
